<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        word-break: break-all;
      }

      body {
        background: #fff;
        color: #333;
        font: 12px/1.5em Helvetica, Arial, sans-serif;
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        font-size: 1em;
      }

      a {
        color: #2b93d2;
        text-decoration: none;
      }

      a:hover {
        color: #e31e1c;
        text-decoration: underline;
      }

      ul,
      li {
        list-style: none;
      }

      fieldset,
      img {
        border: none;
      }

      /* v_show style */
      .v_show {
        width: 595px;
        margin: 20px 0 1px 60px;
      }

      .v_caption {
        height: 35px;
        overflow: hidden;
        background: url(../static/images/btn_cartoon.gif) no-repeat 0 0;
      }

      .v_caption h2 {
        float: left;
        width: 84px;
        height: 35px;
        overflow: hidden;
        background: url(../static/images/btn_cartoon.gif) no-repeat;
        text-indent: -9999px;
      }

      .v_caption .cartoon {
        background-position: 0 -100px;
      }

      .v_caption .variety {
        background-position: -100px -100px;
      }

      .highlight_tip {
        display: inline;
        float: left;
        margin: 14px 0 0 10px;
      }

      .highlight_tip span {
        display: inline;
        float: left;
        width: 7px;
        height: 7px;
        overflow: hidden;
        margin: 0 2px;
        background: url(../static/images/btn_cartoon.gif) no-repeat 0 -320px;
        text-indent: -9999px;
      }

      .highlight_tip .current {
        background-position: 0 -220px;
      }

      .change_btn {
        float: left;
        margin: 7px 0 0 10px;
      }

      .change_btn span {
        display: block;
        float: left;
        width: 30px;
        height: 23px;
        overflow: hidden;
        background: url(../static/images/btn_cartoon.gif) no-repeat;
        text-indent: -9999px;
        cursor: pointer;
      }

      .change_btn .prev {
        background-position: 0 -400px;
      }

      .change_btn .next {
        width: 31px;
        background-position: -30px -400px;
      }

      .v_caption em {
        display: inline;
        float: right;
        margin: 10px 12px 0 0;
        font-family: simsun;
      }

      .v_content {
        position: relative;
        width: 592px;
        height: 160px;
        overflow: hidden;
        border-right: 1px solid #e7e7e7;
        border-bottom: 1px solid #e7e7e7;
        border-left: 1px solid #e7e7e7;
      }

      .v_content_list {
        position: absolute;
        width: 2500px;
        top: 0px;
        left: 0px;
      }

      .v_content ul {
        float: left;
      }

      .v_content ul li {
        display: inline;
        float: left;
        margin: 10px 2px 0;
        padding: 8px;
      }

      .v_content ul li a {
        display: block;
        width: 128px;
        height: 80px;
        overflow: hidden;
      }

      .v_content ul li img {
        width: 128px;
        height: 96px;
      }

      .v_content ul li h4 {
        width: 128px;
        height: 18px;
        overflow: hidden;
        margin-top: 12px;
        font-weight: normal;
      }

      .v_content ul li h4 a {
        display: inline !important;
        height: auto !important;
      }

      .v_content ul li span {
        color: #666;
      }

      .v_content ul li em {
        color: #888;
        font-family: Verdana;
        font-size: 0.9em;
      }
    </style>
  </head>
  <body>
    <div class="v_show">
      <div class="v_caption">
        <h2 class="cartoon" title="卡通动漫">卡通动漫</h2>
        <div class="highlight_tip">
          <span class="current">1</span>
          <span>2</span>
          <span>3</span>
          <span>4</span>
        </div>
        <div class="change_btn">
          <span id="prev" class="prev">上一页</span>
          <span id="next" class="next">下一页</span>
        </div>
        <em><a href="#">更多>></a></em>
      </div>
      <div class="v_content">
        <div class="v_content_list">
          <ul>
            <li>
              <a href="#"><img src="../static/images/01.jpg" alt="海贼王" /></a>
              <h4><a href="#">海贼王</a></h4>
              <span>播放:<em>28,276</em></span>
            </li>
            <li>
              <a href="#"><img src="../static/images/01.jpg" alt="海贼王" /></a>
              <h4><a href="#">海贼王</a></h4>
              <span>播放:<em>28,276</em></span>
            </li>
            <li>
              <a href="#"><img src="../static/images/01.jpg" alt="海贼王" /></a>
              <h4><a href="#">海贼王</a></h4>
              <span>播放:<em>28,276</em></span>
            </li>
            <li>
              <a href="#"><img src="../static/images/01.jpg" alt="海贼王" /></a>
              <h4><a href="#">海贼王</a></h4>
              <span>播放:<em>28,276</em></span>
            </li>
            <li>
              <a href="#"
                ><img src="../static/images/02.jpg" alt="哆啦A梦"
              /></a>
              <h4><a href="#">哆啦A梦</a></h4>
              <span>播放:<em>33,326</em></span>
            </li>
            <li>
              <a href="#"
                ><img src="../static/images/02.jpg" alt="哆啦A梦"
              /></a>
              <h4><a href="#">哆啦A梦</a></h4>
              <span>播放:<em>33,326</em></span>
            </li>
            <li>
              <a href="#"
                ><img src="../static/images/02.jpg" alt="哆啦A梦"
              /></a>
              <h4><a href="#">哆啦A梦</a></h4>
              <span>播放:<em>33,326</em></span>
            </li>
            <li>
              <a href="#"
                ><img src="../static/images/02.jpg" alt="哆啦A梦"
              /></a>
              <h4><a href="#">哆啦A梦</a></h4>
              <span>播放:<em>33,326</em></span>
            </li>
            <li>
              <a href="#"
                ><img src="../static/images/03.jpg" alt="火影忍者"
              /></a>
              <h4><a href="#">火影忍者</a></h4>
              <span>播放:<em>28,276</em></span>
            </li>
            <li>
              <a href="#"
                ><img src="../static/images/03.jpg" alt="火影忍者"
              /></a>
              <h4><a href="#">火影忍者</a></h4>
              <span>播放:<em>28,276</em></span>
            </li>
            <li>
              <a href="#"
                ><img src="../static/images/03.jpg" alt="火影忍者"
              /></a>
              <h4><a href="#">火影忍者</a></h4>
              <span>播放:<em>28,276</em></span>
            </li>
            <li>
              <a href="#"
                ><img src="../static/images/03.jpg" alt="火影忍者"
              /></a>
              <h4><a href="#">火影忍者</a></h4>
              <span>播放:<em>28,276</em></span>
            </li>
            <li>
              <a href="#"><img src="../static/images/04.jpg" alt="龙珠" /></a>
              <h4><a href="#">龙珠</a></h4>
              <span>播放 <em>57,865</em></span>
            </li>
            <li>
              <a href="#"><img src="../static/images/04.jpg" alt="龙珠" /></a>
              <h4><a href="#">龙珠</a></h4>
              <span>播放 <em>57,865</em></span>
            </li>
            <li>
              <a href="#"><img src="../static/images/04.jpg" alt="龙珠" /></a>
              <h4><a href="#">龙珠</a></h4>
              <span>播放 <em>57,865</em></span>
            </li>
            <li>
              <a href="#"><img src="../static/images/04.jpg" alt="龙珠" /></a>
              <h4><a href="#">龙珠</a></h4>
              <span>播放 <em>57,865</em></span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </body>

  <script src="../static/plugins/jquery/jquery-3.3.1.min.js"></script>
  <script>
    $(function () {
      var page = 1;
      var i = 4;
      var $v_show = $(".v_content");
      var $v_show_list = $(".v_content_list");
      //获取显示视频内容的宽
      var contentWidth = $v_show.width();
      //计算视频长度
      var len = $("ul>li").length;
      //计算page数
      var page_count = Math.ceil(len / i);

      //点击'下一页'
      $("#next").click(function () {
        //判断是否正处于动画状态
        if (!$v_show_list.is(":animated")) {
          //判断是否是最后一页
          if (page == page_count) {
            //最后一页则跳转到第一页，通过改变left值，跳转到第一个版面
            $v_show_list.animate({ left: "0px" }, "normal");
            page = 1;
          } else {
            //不是最后一页，则向下翻页,通过改变left值，达到每次换一个版面
            $v_show_list.animate({ left: "-=" + contentWidth }, "normal");
            //页数+1
            page++;
          }

          //给指定的span元素添加current样式，然后去掉span同辈元素上的current样式
          $(".highlight_tip")
            .find("span")
            .eq(page - 1)
            .addClass("current")
            .siblings()
            .removeClass("current");
        }
      });

      //点击'上一页'
      $("#prev").click(function () {
        if (!$v_show_list.is(":animated")) {
          //判断是否第一页
          if (page == 1) {
            //跳转到最后一页
            $v_show_list.animate(
              { left: "-=" + contentWidth * (page_count - 1) },
              "normal"
            );
            page = page_count;
          } else {
            //向前翻页
            $v_show_list.animate({ left: "+=" + contentWidth }, "normal");
            page--;
          }
        }
        //给指定的span元素添加current样式，然后去掉span同辈元素上的current样式
        $(".highlight_tip")
          .find("span")
          .eq(page - 1)
          .addClass("current")
          .siblings()
          .removeClass("current");
      });
    });
  </script>
</html>
